<template>
  <div class="management">
    <div class="contant">
      <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange" fit :max-height="maxHeight" border stripe size="mini" highlight-current-row
        :header-cell-style="{background:'#e5e5e5',color:'#000'}">

        <el-table-column prop="id" label="命令ID" />
        <el-table-column prop="deviceId" label="设备ID" />
        <el-table-column prop="topic" label="发送topic" />
        <el-table-column prop="body" label="发送报文" />
        <el-table-column prop="status" label="ROMA响应状态">
          <template slot-scope="scope">
            <span v-if="scope.row.status == 0" style="color: blue">成功</span>
            <span v-if="scope.row.status == 1" style="color: red">异常</span>
          </template>
        </el-table-column>
        <el-table-column prop="responseBody" label="ROMA响应结果" />
        <el-table-column prop="responseData" label="ROMA响应报文" />
        <el-table-column prop="createBy" label="创建人" />
        <el-table-column prop="createTime" label="发送时间">
          <template slot-scope="scope">
            {{ scope.row.createTime | formatTime }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="250" align="center">
          <template slot-scope="{row,$index}">
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align:right">
        <pagination v-show="pagination.total>0" :limit.sync="pagination.pageSize" :page.sync="pagination.page" :total="pagination.total" @pagination="getPageList" />
      </div>
    </div>

  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
import * as api from '@/api/link/downRecord'

export default {
  comments: {},
  props: {},
  data() {
    return {
      multipleSelection: [],
      tableData: [],
      pagination: {
        total: 1,
        page: 1,
        pageSize: 10
      },
    }
  },
  computed: {
    maxHeight() {
      var curHeight =
        window.innerHeight ||
        document.documentElement.clientHeight ||
        document.body.clientHeight
      return curHeight - 280
    }
  },
  created() {
    this.getPageList()
  },
  mounted() {
  },
  methods: {
    // 复选框事件
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    getPageList() {
      this.search()
    },
    search() {
      const p = Object.assign({}, this.pagination)
      api.page(p).then(resp => {
        this.tableData = resp.data.list
        this.pagination = resp.data.pagination
        this.pagination.page = resp.data.pagination.current
      })
    },
  },
}
</script>

<style scoped lang="scss">
.management {
  padding: 20px;

  .curHeader {
    position: relative;
    height: 40px;
    .searcherBox {
      position: absolute;
      right: 0;
      top: 0;
    }
  }
}
</style>
